<template>
  <div class="ports-page">
    <t-navbar title="我的动态" left-arrow @left-click="backPage" :fixed="true"/>

    <div class="mood-grid">
      <div v-for="mood in moods" :key="mood.id" class="mood-card">
        <!-- 图片区域 -->
        <div class="card-image-container" v-if="mood.img1">
          <img :src="mood.img1" alt="动态图片" class="card-main-image" />
          <div class="image-count-badge" v-if="getImageCount(mood) > 1">
            +{{ getImageCount(mood) - 1 }}
          </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="card-content">
          <div class="card-text">{{ mood.content }}</div>
          
          <div class="card-meta">
            <div class="meta-left">
              <span class="meta-time">{{ formatTime(mood.createTime) }}</span>
              <span class="meta-address">{{ mood.address }}</span>
            </div>
            
            <div class="meta-right">
              <span class="meta-status" :class="statusClass(mood.status)">
                {{ mood.status }}
              </span>
              <span class="meta-type">{{ mood.type }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="loading" class="loading">加载中...</div>
      <div v-if="!loading && moods.length === 0" class="no-data">
        <img src="../assets/no-data.svg" alt="无数据" class="no-data-image" />
        <p>还没有发布过动态</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { get } from "../util/Request";

const router = useRouter();
const moods = ref([]);
const loading = ref(true);

// 计算图片数量
const getImageCount = (mood: any) => {
  let count = 0;
  for (let i = 1; i <= 6; i++) {
    if (mood[`img${i}`]) count++;
  }
  return count;
};

// 格式化时间显示
const formatTime = (timeString: string) => {
  if (!timeString) return '';
  const date = new Date(timeString);
  return `${date.getMonth()+1}.${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 状态样式
const statusClass = (status: string) => {
  return {
    'status-pending': status === '未审核',
    'status-approved': status === '已审核',
    'status-rejected': status === '已拒绝'
  };
};

// 获取 uid
const uid = sessionStorage.getItem("uid");

const loadMoods = () => {
  if (uid) {
    get(`mood/${uid}`).then((res: any) => {
      if (res.data.code === 200) {
        moods.value = res.data.data;
      } else {
        console.error("获取动态失败:", res.data.message);
      }
      loading.value = false;
    }).catch(error => {
      console.error("请求错误:", error);
      loading.value = false;
    });
  } else {
    console.error("未找到 uid");
    loading.value = false;
  }
};

// 初始化加载数据
onMounted(() => {
  loadMoods();
});
const backPage = () => {
  history.back();
};
</script>

<style scoped>
.ports-page {
  background: #f5f6fa;
  min-height: 100vh;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.mood-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mood-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.card-image-container {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.card-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mood-card:hover .card-main-image {
  transform: scale(1.05);
}

.image-count-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.card-content {
  padding: 16px;
}

.card-text {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.meta-left {
  display: flex;
  flex-direction: column;
}

.meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.meta-time {
  margin-bottom: 4px;
}

.meta-address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.meta-status {
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 11px;
}

.status-pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-approved {
  background-color: #d4edda;
  color: #155724;
}

.status-rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  color: #999;
  padding: 40px 0;
}

.no-data {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.no-data-image {
  width: 120px;
  height: 120px;
  opacity: 0.6;
  margin-bottom: 16px;
}
</style>